<template>
  <uni-popup type="bottom" ref="popup" @close="close">
    <view style="background-color: #fff;">
      <view class="popup-content1">
        <text>{{ title }}</text>
      </view>
      <scroll-view scroll-y class="popup-content">
        <text>{{ content }}</text>
      </scroll-view>
      <view class="popup-footer">
        <button class="popup-footer-btn popup-footer-btn1" @click="close">取消</button>
        <button class="popup-footer-btn popup-footer-btn2" @click="close">确定</button>
      </view>
    </view>
  </uni-popup>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  const props = defineProps<{
    title: string
    content: string
  }>()
  const popup = ref()
  const close = () => {
    popup.value.close()
  }
  const open = () => {
    popup.value.open()
  }
  defineExpose({
    open,
    close
  })
</script>
<style scoped lang="scss">
  .popup-content1 {
    padding: 20rpx;
    font-size: 30rpx;
    font-weight: 600;
    text-align: center;
  }
  .popup-content {
    padding: 20rpx;
    font-size: 28rpx;
    max-height: 70vh;
    box-sizing: border-box;
    margin: 30rpx 0;
  }
  .popup-footer {
    display: flex;
    justify-content: space-around;
    padding-bottom: 30rpx;
    height: 110rpx;
    .popup-footer-btn {
      width: 45%;
      height: 80rpx;
      background-color: #fff;
      border-radius: 10rpx;
      border: unset !important;
      &::after {
        border: unset !important;
        content: unset !important;
      }
      font-size: 28rpx;
    }
    .popup-footer-btn1 {
      background-color: #f5f5f5;
    }
    .popup-footer-btn2 {
      background-color: #ff4444;
      color: #fff;
    }
  }
</style>

